今日小知识分享：在线编辑文档插件

2023-09-08 00:15| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1632464896(1).png

最近在后台管理系统中使用了ONLYOFFICE，实现了多人在线编辑文档的功能，今天有空就整理出来方便下次使用。（官网是英文的，对于我看起来着实困难。）

项目框架是vue，所以我就以vue项目为例子做个示例：

首先在index.html文件里引入后端给的地址，官网给的是示例，项目中还是要用后端生成的地址：

组件中（外层的弹窗组件请忽略）：

option: { document: { fileType: '', permissions: { comment: true, download: false, edit: false, copy: false, print: false, }, key: '', title: '', url: '' }, editorConfig: { lang: 'zh-CN', // 回调接口，用于编辑后实现保存的功能,(关闭页面5秒左右会触发) callbackUrl: '', user: { id: '', name: '' } }, token: '', height: '100%', width: '100%' }, docEditor: null,

之后可根据需求对文档进行一些权限的设置：

this.option.document.permissions.edit = true; 是否可编辑 this.option.document.permissions.copy = true; 是否可复制 this.option.document.permissions.download = true; 是否可下载（后端那边对文档进行设置的） this.option.document.permissions.comment = true; 是否可评论 this.option.document.permissions.print = true; 是否可打印（后端那边对文档进行设置的）

（我只用到了编辑，复制的功能，下载是后端进行设置的，其他功能待研究。）

实例化：

this.docEditor = new DocsAPI.DocEditor('onlineEdit', this.option);

完整代码可去gitHub上查看，有空我写个demo出来。

感谢掘友们支持！！！

【本文地址】

公司简介

联系我们